<template>
  <a-modal size="mini" class="modal-con" :visible="visible" :footer="false" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="1200px" top="30px" :mask-closable="false">
    <template #title> 库存详情 </template>
    <div>
      <a-tabs size="mini" v-model:active-key="currentPage">
        <a-tab-pane key="1" title="库存简介">
          <div class="top">
            <div class="hd">
              <a-row>
                <a-col :span="4" style="height: 160px">
                  <a-image width="100%" height="100%" :src="detailInfo.productImg"></a-image>
                </a-col>
                <a-col :span="20">
                  <a-row class="row-style">
                    <a-col :span="16">
                      <div class="title fl">品名</div>
                      <div class="text fl" style="width: 550px">
                        <TextLimit position="top" :rows="1" style="margin-top: 10px">{{ detailInfo.productName }}</TextLimit>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <span class="title fl">店铺</span>
                      <span class="text fl">
                        <TextHidden position="top" :rowsWidth="200">{{ detailInfo.shopName }}</TextHidden>
                      </span>
                    </a-col>
                  </a-row>
                  <a-row class="row-style">
                    <a-col :span="8">
                      <span class="title fl">产品SKU</span>
                      <span class="text fl">
                        <TextHidden position="top" :rowsWidth="200">{{ detailInfo.sku }}</TextHidden>
                      </span>
                    </a-col>
                    <a-col :span="8">
                      <span class="title">类目</span>
                      <span class="text">{{ detailInfo.cateName }}</span>
                    </a-col>
                    <a-col :span="8">
                      <span class="title">销售员</span>
                      <span class="text">{{ detailInfo.ownerName }}</span>
                    </a-col>
                  </a-row>
                  <a-row class="row-style">
                    <a-col :span="8">
                      <span class="title fl">FNSKU</span>
                      <span class="text fl">
                        <TextHidden position="top" :rowsWidth="200">{{ detailInfo.fnsku }}</TextHidden>
                      </span>
                    </a-col>
                    <a-col :span="8">
                      <span class="title">sellerSKU</span>
                      <span class="text">{{ detailInfo.msku }}</span>
                    </a-col>
                    <a-col :span="8">
                      <span class="title">更新时间</span>
                      <span class="text">{{ $setTime(detailInfo.gmtWrite) }}</span>
                    </a-col>
                  </a-row>
                  <a-row class="row-style">
                    <a-col :span="8">
                      <span class="title">库存编号</span>
                      <span class="text">{{ detailInfo.inventoryCode }}</span>
                    </a-col>
                    <a-col :span="8">
                      <span class="title">库存属性</span>
                      <span class="text">{{ detailInfo.attribute == 'good' ? '良品' : '次品' }}</span>
                    </a-col>
                    <a-col :span="8">
                      <span class="title">状态</span>
                      <span class="text">{{}}</span>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </div>
            <div class="bd">
              <a-row style="height: 100%">
                <a-col :span="11" class="bd-row">
                  <div ref="adChartFef" class="chart"></div>
                </a-col>
                <a-col :span="7" class="bd-row">
                  <span class="title">数量</span>
                  <span class="text">
                    <span>可用：</span>
                    <span>{{ detailInfo.amtAvailable }}</span
                    ><br />
                    <span>锁定：</span>
                    <span>{{ detailInfo.amtLocked }}</span>
                  </span>
                </a-col>
                <a-col :span="6" class="bd-row">
                  <span class="title">成本</span>
                  <span class="text">
                    <span>最新：</span>
                    <span>{{ detailInfo.lastPrice }}</span
                    ><br />
                    <span>平均：</span>
                    <span> {{ detailInfo.avgPrice }}</span
                    ><br />
                    <span>最低：</span>
                    <span> {{ detailInfo.minPrice }}</span
                    ><br />
                    <span>最高：</span>
                    <span> {{ detailInfo.maxPrice }}</span
                    ><br />
                  </span>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="bottom" style="margin-top: 10px">
            <a-table size="mini" class="table-singe-line" :data="tableListFirst" :scroll="{ y: '280px' }" :pagination="false">
              <template #columns>
                <a-table-column title="序号" :width="60">
                  <template #cell="{ record, rowIndex }">
                    {{ rowIndex + 1 }}
                  </template>
                </a-table-column>
                <a-table-column title="类型" :width="80">
                  <template #cell="{ record, rowIndex }">
                    {{ filterBookingType(record.bookingType) }}
                  </template>
                </a-table-column>
                <a-table-column title="数量" :width="60">
                  <template #cell="{ record, rowIndex }">
                    {{ record.amt }}
                  </template>
                </a-table-column>
                <a-table-column title="单价" :width="60">
                  <template #cell="{ record, rowIndex }">
                    {{ record.avgPrice }}
                  </template>
                </a-table-column>
                <!-- <a-table-column title="库存属性" :width="140">
                  <template #cell="{ record, rowIndex }">
                    {{ record.avgPrice }}
                  </template>
                </a-table-column> -->
                <a-table-column title="库存(前)" :width="80">
                  <template #cell="{ record, rowIndex }">
                    {{ record.amtPreAvailable }}
                  </template>
                </a-table-column>
                <a-table-column title="库存(后)" :width="80">
                  <template #cell="{ record, rowIndex }">
                    {{ record.amtAfterAvailable }}
                  </template>
                </a-table-column>
                <a-table-column title="锁定(前)" :width="80">
                  <template #cell="{ record, rowIndex }">
                    {{ record.amtPreLocked }}
                  </template>
                </a-table-column>
                <a-table-column title="锁定(后)" :width="80">
                  <template #cell="{ record, rowIndex }">
                    {{ record.amtAfterLocked }}
                  </template>
                </a-table-column>
                <a-table-column title="业务类型" :width="140">
                  <template #cell="{ record, rowIndex }">
                    {{ record.bizName }}
                  </template>
                </a-table-column>
                <a-table-column title="业务编号" :width="140">
                  <template #cell="{ record, rowIndex }">
                    {{ record.bizId }}
                  </template>
                </a-table-column>
                <a-table-column title="业务备注" :width="140">
                  <template #cell="{ record, rowIndex }">
                    {{ record.bizRemarks }}
                  </template>
                </a-table-column>
                <a-table-column title="操作员" :width="120">
                  <template #cell="{ record, rowIndex }">
                    {{ record.optUname }}
                  </template>
                </a-table-column>
                <a-table-column title="时间" :width="160">
                  <template #cell="{ record, rowIndex }">
                    {{ $setTime(record.gmtCreate) }}
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="出入库记录">
          <div style="display: flex; margin: 10px">
            <div style="overflow: hidden; line-height: 32px">
              <div class="fl">类型：</div>
              <a-select class="fl" v-model="searchValue.ioType" style="width: 120px" allow-clear placeholder="请选择">
                <a-option label="出库" value="-1"></a-option>
                <a-option label="入库" value="1"></a-option>
                <a-option label="锁定" value="0"></a-option>
                <a-option label="解锁" value="2"></a-option>
              </a-select>
            </div>
            <div style="overflow: hidden; line-height: 32px; margin-left: 10px">
              <div class="fl">业务类型：</div>
              <a-select class="fl" v-model="searchValue.bizType" style="width: 120px" allow-clear placeholder="请选择">
                <a-option v-for="item of inventoryTypeList" :label="item.bizName" :value="item.bizType"></a-option>
              </a-select>
            </div>
            <div style="overflow: hidden; line-height: 32px; margin-left: 10px">
              <div class="fl">业务编号：</div>
              <a-input class="fl" v-model="searchValue.bizId" placeholder="请输入" style="width: 120px"></a-input>
            </div>
            <div style="overflow: hidden; line-height: 32px; margin-left: 10px">
              <div class="fl">业务备注：</div>
              <a-input class="fl" v-model="searchValue.bizRemarks" placeholder="请输入" style="width: 120px"></a-input>
            </div>
            <div style="overflow: hidden; line-height: 32px; margin-left: 10px">
              <div class="fl">时间：</div>
              <a-range-picker v-model="searchValue.time" style="width: 254px; marginbottom: 20px" />
            </div>
            <div style="overflow: hidden; line-height: 32px; margin-left: 10px">
              <a-button class="gray-outline" size="medium" @click="sizeChange(20)">搜索</a-button>
            </div>
          </div>

          <a-table size="mini" :loading="loading" class="table-singe-line" :data="tableListSecond" :scroll="{ y: '280px' }" :pagination="false">
            <template #columns>
              <a-table-column title="序号" :width="60">
                <template #cell="{ record, rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="类型" :width="80">
                <template #cell="{ record, rowIndex }">
                  {{ filterBookingType(record.bookingType) }}
                </template>
              </a-table-column>
              <a-table-column title="数量" :width="60">
                <template #cell="{ record, rowIndex }">
                  {{ record.amt }}
                </template>
              </a-table-column>
              <a-table-column title="单价" :width="60">
                <template #cell="{ record, rowIndex }">
                  {{ record.avgPrice }}
                </template>
              </a-table-column>
              <!-- <a-table-column title="库存属性" :width="140">
                  <template #cell="{ record, rowIndex }">
                    {{ record.avgPrice }}
                  </template>
                </a-table-column> -->
              <a-table-column title="库存(前)" :width="80">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtPreAvailable }}
                </template>
              </a-table-column>
              <a-table-column title="库存(后)" :width="80">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtAfterAvailable }}
                </template>
              </a-table-column>
              <a-table-column title="锁定(前)" :width="80">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtPreLocked }}
                </template>
              </a-table-column>
              <a-table-column title="锁定(后)" :width="80">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtAfterLocked }}
                </template>
              </a-table-column>
              <a-table-column title="业务类型" :width="140">
                <template #cell="{ record, rowIndex }">
                  {{ record.bizName }}
                </template>
              </a-table-column>
              <a-table-column title="业务编号" :width="140">
                <template #cell="{ record, rowIndex }">
                  {{ record.bizId }}
                </template>
              </a-table-column>
              <a-table-column title="业务备注" :width="140">
                <template #cell="{ record, rowIndex }">
                  {{ record.bizRemarks }}
                </template>
              </a-table-column>
              <a-table-column title="操作员" :width="140">
                <template #cell="{ record, rowIndex }">
                  {{ record.optUname }}
                </template>
              </a-table-column>
              <a-table-column title="时间" :width="160">
                <template #cell="{ record, rowIndex }">
                  {{ $setTime(record.gmtCreate) }}
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div class="pagination-footer">
            <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed, nextTick, onMounted } from 'vue'
  import { findWarehouseListByParam } from '@/api/warehouse'
  import { getInventoryIoType, findInventoryIoPage, getInventoryById } from '@/api/inventory'
  import { Message } from '@arco-design/web-vue'
  import { dispose } from 'echarts/core'
  import useEcharts from '@/hooks/useEcharts'
  import dayjs from 'dayjs'
  import TextLimit from '@/components/textLimit.vue'
  export default defineComponent({
    props: ['info'],
    components: { TextLimit },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const adChartFef = ref<HTMLDivElement | null>(null)
      const data = reactive({
        currentPage: '1',
        tableListFirst: [],
        tableListSecond: [],
        logList: [],
        searchValue: {},
        inventoryTypeList: [],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        loading: false,
        detailInfo: {},
      })

      const open = () => {
        console.log(props.info)

        getWareHouseList()
        getDetail()
        getInventoryIoTypeList()
        findInventoryIoPageFirst()
        findInventoryIoPageSecond()
      }
      const handleOk = () => {
        // formRef.value.validate(async (valid: any) => {
        //   if (!valid) {
        //     let params: any = data.form
        //     params.ids = props.ids
        //     const res: any = await updateLocationRemarkBatch(params)
        //     if (res.code == 'SUCCESS') {
        //       data.form = {}
        //       Message.success('修改成功')
        //       visible.value = false
        //       emit('save')
        //     }
        //   }
        // })
      }
      const handleCancel = () => {
        data.searchValue = {}
        visible.value = false
      }
      const getWareHouseList = async () => {
        const res = await findWarehouseListByParam()
        // data.houseList = res.data
      }
      function initChart(inList: any, outList: any, dateList: any) {
        // 容易导致重复渲染，先清除
        if (adChartFef.value) {
          dispose(adChartFef.value as HTMLDivElement)
        }

        const option = {
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dateList,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '出库数',
              type: 'line',
              stack: 'Total',
              data: outList,
            },
            {
              name: '入库数',
              type: 'line',
              stack: 'Total',
              data: inList,
            },
          ],
        }
        nextTick(() => useEcharts(adChartFef.value as HTMLDivElement).setOption(option))
      }

      const getInventoryIoTypeList = async () => {
        const res = await getInventoryIoType()
        data.inventoryTypeList = res?.data
      }

      const findInventoryIoPageFirst = async () => {
        let params = {
          pageNum: 1,
          pageSize: 20,
          inventoryId: props.info.id,
        }
        const res = await findInventoryIoPage(params)
        data.tableListFirst = res?.data?.records || []
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        findInventoryIoPageSecond()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        findInventoryIoPageSecond()
      }

      const findInventoryIoPageSecond = async () => {
        let params: any = {
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
          inventoryId: props.info.id,
        }
        for (const key in data.searchValue) {
          if (key == 'time' && data.searchValue[key]) {
            params.startDate = `${data.searchValue[key][0]} 00:00:00`
            params.endDate = `${data.searchValue[key][1]} 23:59:59`
          } else {
            params[key] = data.searchValue[key]
          }
        }
        data.loading = true
        const res = await findInventoryIoPage(params)
        data.tableListSecond = res?.data?.records || []
        data.pageNation.total = res?.data?.total
        data.loading = false
      }

      const filterBookingType = (type: string) => {
        let text = ''
        switch (type) {
          case 'INBOUND':
          case 'INBOUND_CHECK':
            text = '入库'
            break
          case 'INBOUND_FROM_UNLOCKED':
            text = '解锁'
            break
          case 'OUTBOUND':
          case 'OUTBOUND_FROM_LOCKED':
          case 'OUTBOUND_CHECK':
            text = '出库'
            break
          case 'OUTBOUND_LOCKED':
            text = '锁定'
            break
          case 'UPDATE_AVG_PRICE':
            text = '更新单价'
            break
          default:
            text = '未知'
            break
        }
        return text
      }

      const getDetail = async () => {
        const res = await getInventoryById({ id: props.info.id })
        data.detailInfo = res.data
        let inList: any = []
        let outList: any = []
        let dateList: any = []
        let arr = res.data?.ioAmtInSnapshots || []
        let arr1 = res.data?.ioAmtOutSnapshots || []
        arr.forEach((e: any) => {
          let date = dayjs(e.date).format('MM-DD')
          inList.push(e.amt)
          dateList.push(date)
        })
        arr1.forEach((e: any) => {
          outList.push(e.amt)
        })
        initChart(inList, outList, dateList)
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        adChartFef,
        sizeChange,
        changePage,
        filterBookingType,
      }
    },
  })
</script>

<style lang="less" scoped>
  .modal-con {
    .arco-drawer {
      :deep(.arco-modal-body) {
        padding: 10px !important;
      }
    }
  }

  .upload {
    position: relative;
    :deep(.arco-upload-progress) {
      display: none;
    }
  }

  .text {
    // position: absolute;
    // left: 180px;
    // top: 0;
    margin-left: 10px;
  }

  .footer-text {
    font-size: 12px;
    color: darkgray;
  }

  .top {
    width: 100%;
    // height: 300px;
    margin-top: 10px;
    border: 1px solid #d7d7d7;
    span {
      display: inline-block;
    }

    .hd {
      .title {
        width: 80px;
        text-align: center;
        border-left: 1px solid #d7d7d7;
        border-right: 1px solid #d7d7d7;
      }
    }

    .row-style {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #d7d7d7;
      &:last-child {
        border-bottom: none;
      }
    }

    .bd {
      height: 200px;
      .title {
        width: 79px;
        height: 100%;
        line-height: 200px;
        text-align: center;
        border-right: 1px solid #d7d7d7;
      }
    }

    .bd-row {
      border-right: 1px solid #d7d7d7;
      border-top: 1px solid #d7d7d7;
      height: 100%;
      &:last-child {
        border-right: none;
      }
    }
  }

  .chart {
    width: 100%;
    height: 200px;
  }

  :deep(.arco-col-11) {
    flex: 0 0 44.5%;
  }

  :deep(.arco-col-7) {
    flex: 0 0 27.8%;
  }
  :deep(.arco-col-6) {
    flex: 0 0 27.6%;
  }
</style>
